<template>
  <div class="knowledge-page">
   <!--  <div class="knowledge-header">
      <h1 class="page-title">企业知识库</h1>
      <p class="page-subtitle">智能管理企业文档，提升工作效率</p>
    </div> -->
    
    <div class="knowledge-content">
      <!-- 左侧知识树 -->
      <div class="knowledge-tree">
        <div class="tree-header">
          <h3>知识分类</h3>
          <div class="header-actions">
            <el-button type="primary" size="small" class="add-category-btn" @click="showNewDirDialog = true">
              <el-icon><Plus /></el-icon>
              添加分类
            </el-button>
          </div>
        </div>
        
        <div 
          class="tree-content" 
          v-loading="treeLoading" 
          element-loading-text="加载中..." 
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <!-- 拖拽覆盖层 -->
          <div 
            class="drag-overlay"
            @drop="handleFileDrop"
            @dragover.prevent
            @dragenter.prevent
            @dragenter="handleDragEnter"
            @dragleave="handleDragLeave"
            :class="{ 'drag-over': isDragOver }"
          ></div>
          
          <el-tree
            ref="treeRef"
            :data="knowledgeTree"
            :props="defaultProps"
            node-key="path"
            :current-key="currentNode"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleTreeNodeClick"
            class="knowledge-tree-component"
          >
            <template #default="{ node, data }">
              <div class="tree-node">
                <el-icon class="node-icon">
                  <Folder />
                </el-icon>
                <span class="node-label" :title="node.label">{{ node.label }}</span>
                <div class="node-actions" v-if="data.children && data.children.length > 0">
                  <el-dropdown @command="(command) => handleTreeAction(command, data)" trigger="click">
                    <el-icon class="action-icon"><MoreFilled /></el-icon>
                      <template #dropdown>
                      <el-dropdown-menu class="tree-dropdown">
                        <el-dropdown-item command="add" class="dropdown-item">
                          <el-icon><Plus /></el-icon>
                          添加子分类
                        </el-dropdown-item>
                        <el-dropdown-item command="upload" class="dropdown-item">
                          <el-icon><Upload /></el-icon>
                          上传文档
                        </el-dropdown-item>
                        <!-- <el-dropdown-item command="edit" class="dropdown-item">
                          <el-icon><EditPen /></el-icon>
                          编辑分类
                        </el-dropdown-item> -->
                        <el-dropdown-item command="delete" divided class="dropdown-item danger">
                          <el-icon><Delete /></el-icon>
                          删除分类
                        </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                </div>
                <div class="node-actions" v-else>
                  <el-dropdown @command="(command) => handleTreeAction(command, data)" trigger="click">
                    <el-icon class="action-icon"><MoreFilled /></el-icon>
                      <template #dropdown>
                      <el-dropdown-menu class="tree-dropdown">
                        <el-dropdown-item command="upload" class="dropdown-item">
                          <el-icon><Upload /></el-icon>
                          上传文档
                        </el-dropdown-item>
                        <!-- <el-dropdown-item command="add" class="dropdown-item">
                          <el-icon><Plus /></el-icon>
                          添加子分类
                        </el-dropdown-item> -->
                        <el-dropdown-item command="edit" class="dropdown-item">
                          <el-icon><EditPen /></el-icon>
                          编辑分类
                        </el-dropdown-item>
                        <el-dropdown-item command="delete" divided class="dropdown-item danger">
                          <el-icon><Delete /></el-icon>
                          删除分类
                        </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                </div>
              </div>
            </template>
          </el-tree>
          
          <!-- 空状态显示 -->
          <div v-if="!treeLoading && knowledgeTree.length === 0" class="tree-empty-state">
            <div class="custom-empty">
              <div class="empty-icon">
                <el-icon size="80" color="#c0c4cc"><Folder /></el-icon>
              </div>
              <div class="empty-text">暂无知识分类</div>
              <el-button type="primary" @click="showNewDirDialog = true">
                <el-icon><Plus /></el-icon>
                创建第一个分类
              </el-button>
            </div>
          </div>
          

        </div>
        </div>

      <!-- 右侧知识片段列表 -->
      <div class="knowledge-list">
        <div class="list-header">
          <div class="header-left">
            <h3>知识片段</h3>
            <span class="fragment-count">共 {{ fragmentList.length }} 个片段</span>
          </div>
          <div class="header-right">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索片段..."
              class="search-input"
              clearable
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" class="add-fragment-btn" @click="showNewFragmentDialog = true">
              <el-icon><Plus /></el-icon>
              新建片段
            </el-button>
          </div>
        </div>
        
        <div class="list-content">
          <div v-if="!tableLoading && fragmentList.length === 0" class="fragment-empty-state">
            <div class="custom-empty">
              <div class="empty-icon">
                <el-icon size="80" color="#c0c4cc"><Document /></el-icon>
              </div>
              <div class="empty-text">暂无知识片段</div>
              <el-button type="primary" @click="showNewFragmentDialog = true">
                <el-icon><Plus /></el-icon>
                创建第一个片段
              </el-button>
            </div>
          </div>
          
          <el-table
            v-else-if="fragmentList.length > 0"
            :data="filteredFragments"
            style="width: 100%"
            v-loading="tableLoading"
            element-loading-text="加载中..."
            element-loading-background="rgba(255, 255, 255, 0.8)"
            :max-height="500"
            class="scrollable-table"
          >
              <el-table-column prop="title" label="片段标题" min-width="250">
                <template #default="{ row }">
                  <div class="fragment-title">
                    <el-icon class="fragment-icon"><Document /></el-icon>
                    <span>{{ row.title }}</span>
                  </div>
              </template>
            </el-table-column>
              <!-- <el-table-column prop="name" label="文件名" min-width="150" /> -->
              <el-table-column prop="labels" label="标签" min-width="200">
                <template #default="{ row }">
                  <div class="fragment-tags">
                    <el-tag
                      v-for="label in row.labels"
                      :key="label"
                      size="small"
                      class="fragment-tag"
                    >
                      {{ label }}
                    </el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="280" fixed="right">
                <template #default="{ row }">
                  <div class="fragment-actions">
                    <el-button type="primary" text size="small" @click="handleView(row)">
                      <el-icon><View /></el-icon>
                    查看
                  </el-button>
                    <el-button type="primary" text size="small" @click="handleEdit(row)">
                      <el-icon><EditPen /></el-icon>
                    编辑
                  </el-button>
                    <el-button type="danger" text size="small" @click="handleDelete(row)">
                      <el-icon><Delete /></el-icon>
                    删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    </div>

    <!-- 新建分类弹窗 -->
    <el-dialog
      v-model="showNewDirDialog"
      title="新建分类"
      width="500px"
      class="knowledge-dialog"
    >
      <el-form :model="newDirForm" :rules="dirFormRules" ref="newDirFormRef" label-width="80px">
        <el-form-item label="分类名称" prop="title">
          <el-input v-model="newDirForm.title" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="上级分类" prop="parentPath">
          <el-tree-select
            v-model="newDirForm.parentPath"
            :data="knowledgeTree"
            :props="defaultProps"
            value-key="path"
            placeholder="请选择上级分类"
            check-strictly
            clearable
          />
        </el-form-item>
        <el-form-item label="完整路径" prop="path">
          <el-input 
            v-model="newDirForm.path" 
            placeholder="路径将自动生成" 
            readonly
            :disabled="true"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showNewDirDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmNewDir">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑分类弹窗 -->
    <el-dialog
      v-model="editDirDialogVisible"
      title="编辑分类"
      width="500px"
      class="knowledge-dialog"
    >
      <el-form :model="editDirForm" :rules="dirFormRules" ref="editDirFormRef" label-width="80px">
        <el-form-item label="分类名称" prop="title">
          <el-input v-model="editDirForm.title" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="完整路径" prop="path">
          <el-input 
            v-model="editDirForm.path" 
            placeholder="路径将自动生成" 
            readonly
            :disabled="true"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDirDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmEditDir">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新建片段弹窗 -->
    <el-dialog
      v-model="showNewFragmentDialog"
      title="新建知识片段"
      width="800px"
      class="knowledge-dialog"
    >
      <el-form :model="newFragmentForm" :rules="fragmentFormRules" ref="newFragmentFormRef" label-width="80px">
        <el-form-item label="片段标题" prop="fragment">
          <el-input v-model="newFragmentForm.fragment" placeholder="请输入片段标题" />
        </el-form-item>
      <!--   <el-form-item label="文件名" prop="name">
          <el-input v-model="newFragmentForm.name" placeholder="请输入文件名" />
        </el-form-item> -->
        <el-form-item label="所属分类" prop="path">
          <el-tree-select
            v-model="newFragmentForm.path"
            :data="knowledgeTree"
            :props="defaultProps"
            value-key="path"
            placeholder="请选择所属分类"
            check-strictly
            clearable
          />
        </el-form-item>
        <el-form-item label="标签" prop="labels">
          <el-select
            v-model="newFragmentForm.labels"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择或输入标签"
          >
            <el-option
              v-for="tag in availableTags"
              :key="tag"
              :label="tag"
              :value="tag"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="片段内容" prop="content">
          <div class="content-editor-wrapper">
            <div 
              class="content-preview" 
              @click="openContentEditor"
            >
              <div v-if="!newFragmentForm.content" class="placeholder-text">点击此处编写片段内容...</div>
              <div v-else v-html="newFragmentForm.content"></div>
            </div>
            <div class="content-actions">
              <el-button size="small" @click="openContentEditor">
                <el-icon><EditPen /></el-icon>
                编辑内容
              </el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showNewFragmentDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmNewFragment">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 片段详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="片段详情"
      width="80%"
      class="knowledge-dialog detail-dialog"
    >
      <div class="fragment-detail">
        <div class="detail-header">
          <h3>{{ currentFragment?.fragment }}</h3>
          <div class="detail-meta">
            <!-- <span class="meta-item">文件名：{{ currentFragment?.name }}</span> -->
            <span class="meta-item">路径：{{ currentFragment?.path }}</span>
            <span class="meta-item">标签：
              <el-tag
                v-for="tag in currentFragment?.labels"
                :key="tag"
                size="small"
                class="detail-tag"
              >
                {{ tag }}
              </el-tag>
            </span>
      </div>
        </div>
        <div class="detail-content" v-html="currentFragment?.content"></div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="currentFragment && handleEdit(currentFragment)">编辑</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑片段弹窗 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑片段"
      width="90%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="knowledge-dialog edit-dialog"
      top="5vh"
    >
      <el-form :model="editForm" ref="editFormRef" label-width="80px">
        <el-form-item label="片段内容" prop="content">
          <div class="editor-container">
            <Toolbar
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
              style="border-bottom: 1px solid #ccc"
            />
            <Editor
              :defaultConfig="editorConfig"
              :mode="mode"
              v-model="editForm.content"
              @onCreated="handleEditorCreated"
              @onChange="handleEditorChange"
              style="height: 300px; overflow-y: hidden;"
            />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmEditFragment">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 上传文档弹窗 -->
    <el-dialog
      v-model="showUploadDialog"
      title="上传文档"
      width="600px"
      class="knowledge-dialog upload-dialog"
    >
      <div class="upload-container">
        <div class="upload-area">
          <el-upload
            ref="uploadRef"
            :action="uploadAction"
            :headers="uploadHeaders"
            :data="uploadData"
            :before-upload="beforeUpload"
            :on-success="onUploadSuccess"
            :on-error="onUploadError"
            :on-change="onFileChange"
            :file-list="uploadFileList"
            :auto-upload="false"
            :multiple="true"
            :show-file-list="true"
            drag
            class="upload-component"
          >
            <el-icon class="el-icon--upload"><Upload /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持 PDF、Word、Excel、TXT 等格式，单个文件不超过 50MB
              </div>
            </template>
          </el-upload>
        </div>
        
        <div class="upload-target">
          <h4>上传到分类：</h4>
          <el-tree-select
            v-model="uploadTargetPath"
            :data="knowledgeTree"
            :props="defaultProps"
            value-key="path"
            placeholder="请选择目标分类"
            check-strictly
            clearable
            class="upload-tree-select"
          />
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showUploadDialog = false">取消</el-button>
          <el-button type="primary" @click="startUpload" :loading="uploading">
            {{ uploading ? '上传中...' : '开始上传' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 内容编辑弹窗 -->
    <el-dialog
      v-model="contentEditorVisible"
      title="编辑片段内容"
      width="90%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="knowledge-dialog content-editor-dialog"
      top="5vh"
    >
      <div class="editor-container">
        <Toolbar
          :editor="contentEditorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
          style="border-bottom: 1px solid #ccc"
        />
        <Editor
          :defaultConfig="editorConfig"
          :mode="mode"
          v-model="newFragmentForm.content"
          @onCreated="handleContentEditorCreated"
          @onChange="handleContentEditorChange"
          style="height: 400px; overflow-y: hidden;"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="contentEditorVisible = false">取消</el-button>
          <el-button type="primary" @click="saveContentAndClose">保存并关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑分类弹窗 -->
  
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { 
  Plus, 
  Folder, 
  Document, 
  Search, 
  EditPen, 
  Delete,
  View,
  MoreFilled,
  Loading,
  Upload
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { dir, fragments, fragmentContent, editfragmentContent, dirTree, uploadKbFile, addKbData } from '@/api/knowledge'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

interface TreeNode {
  title: string
  path: string
  children?: TreeNode[]
}

// 知识树数据
const knowledgeTree = ref<TreeNode[]>([])
// 当前选中的节点
const currentNode = ref<string>('')
// loading状态
const treeLoading = ref<boolean>(false)
const tableLoading = ref<boolean>(false)

// 知识片段数据
const fragmentList = ref<any>({
  content: '',
  labels: []
})
const searchKeyword = ref<string>('')
interface Fragment {
  know_id: string
  fragment: string
  name: string
  labels: string[]
  content: string
  path: string
}

const currentFragment = ref<Fragment | null>(null)

// 弹窗状态
const showNewDirDialog = ref<boolean>(false)
const showNewFragmentDialog = ref<boolean>(false)
const detailDialogVisible = ref<boolean>(false)
const editDialogVisible = ref<boolean>(false)
const editDirDialogVisible = ref<boolean>(false)
const contentEditorVisible = ref<boolean>(false)
const showUploadDialog = ref<boolean>(false)

// 上传相关状态
const uploading = ref<boolean>(false)
const uploadFileList = ref<any[]>([])
const uploadTargetPath = ref<string>('')
const uploadRef = ref<any>()
const isDragOver = ref<boolean>(false)

// 上传配置
const uploadAction = ref<string>('/api/kb/add_kbfile') // 知识库文件上传API
const uploadHeaders = ref<Record<string, string>>({})
const uploadData = ref<Record<string, any>>({})

// 表单引用
const newDirFormRef = ref<any>()
const newFragmentFormRef = ref<any>()
const editFormRef = ref<any>()
const editDirFormRef = ref<any>()
// 树组件引用
const treeRef = ref<any>()

// wangeditor编辑器相关
const editorRef = ref()
const contentEditorRef = ref()
const mode = ref('default')
const toolbarConfig = {
  excludeKeys: [
    'uploadVideo',
    'insertVideo',
    'insertVideoFromUrl',
    'insertLink',
   
  ]
}
const editorConfig = {
  placeholder: '请输入片段内容...',
  MENU_CONF: {}
}

// 编辑器事件处理
const handleEditorCreated = (editor: any) => {
  editorRef.value = editor
}

const handleEditorChange = (editor: any) => {
  // 编辑器内容变化时的处理
  console.log('编辑器内容变化:', editor.getHtml())
}

// 内容编辑器事件处理
const handleContentEditorCreated = (editor: any) => {
  contentEditorRef.value = editor
}

const handleContentEditorChange = (editor: any) => {
  // 内容编辑器内容变化时的处理
  console.log('内容编辑器内容变化:', editor.getHtml())
}

// 打开内容编辑器
const openContentEditor = () => {
  contentEditorVisible.value = true
}

// 保存内容并关闭编辑器
const saveContentAndClose = () => {
  contentEditorVisible.value = false
  // 内容已经通过v-model自动保存到newFragmentForm.content
}

// 处理文件拖拽
const handleFileDrop = (event: DragEvent) => {
  try {
    console.log('文件拖拽事件触发')
    event.preventDefault()
    event.stopPropagation()
    
    // 立即重置拖拽状态
    isDragOver.value = false
    
    const files = event.dataTransfer?.files
    console.log('拖拽的文件:', files)
    
    if (files && files.length > 0) {
      // 设置拖拽的目标路径为当前选中的分类
      if (currentNode.value) {
        uploadTargetPath.value = currentNode.value
        console.log('设置上传目标路径:', currentNode.value)
      } else {
        // 如果没有选中的分类，使用第一个可用的分类
        if (knowledgeTree.value.length > 0) {
          const firstPath = knowledgeTree.value[0].path
          uploadTargetPath.value = firstPath
          console.log('使用默认路径:', firstPath)
        }
      }
      
      // 将拖拽的文件添加到上传列表
      uploadFileList.value = Array.from(files).map(file => ({
        name: file.name,
        size: file.size,
        raw: file
      }))
      
      console.log('拖拽后的文件列表:', uploadFileList.value)
      
      // 显示上传对话框
      showUploadDialog.value = true
      
      // 显示成功消息
      ElMessage.success(`成功添加 ${files.length} 个文件`)
    }
  } catch (error) {
    console.error('拖拽处理失败:', error)
    ElMessage.error('拖拽处理失败，请重试')
    // 确保拖拽状态被重置
    isDragOver.value = false
  }
}

// 拖拽进入
const handleDragEnter = (event: DragEvent) => {
  try {
    console.log('拖拽进入知识树区域')
    event.preventDefault()
    event.stopPropagation()
    
    // 检查是否有文件被拖拽
    if (event.dataTransfer && event.dataTransfer.types.includes('Files')) {
      isDragOver.value = true
      console.log('拖拽状态设置为 true')
      
      // 添加视觉反馈
      const overlay = event.currentTarget as HTMLElement
      if (overlay) {
        overlay.style.pointerEvents = 'all'
        console.log('拖拽覆盖层已激活')
      }
    }
  } catch (error) {
    console.error('拖拽进入处理失败:', error)
  }
}

// 拖拽离开
const handleDragLeave = (event: DragEvent) => {
  try {
    console.log('拖拽离开知识树区域')
    event.preventDefault()
    event.stopPropagation()
    
    // 检查是否真的离开了拖拽区域
    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
    const x = event.clientX
    const y = event.clientY
    
    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
      isDragOver.value = false
      console.log('拖拽状态设置为 false')
      
      // 重置视觉反馈
      const overlay = event.currentTarget as HTMLElement
      if (overlay) {
        overlay.style.pointerEvents = 'none'
        console.log('拖拽覆盖层已停用')
      }
    }
  } catch (error) {
    console.error('拖拽离开处理失败:', error)
    // 确保状态被重置
    isDragOver.value = false
  }
}

// 上传前检查
const beforeUpload = (file: File) => {
  const isValidSize = file.size / 1024 / 1024 < 50
  if (!isValidSize) {
    ElMessage.error('文件大小不能超过 50MB!')
    return false
  }
  return true
}

// 上传成功回调（当使用 el-upload 自动上传时）
const onUploadSuccess = async (response: any, file: any) => {
  console.log('el-upload 上传成功回调:', response, file)
  // 这个回调现在不会被调用，因为我们使用手动上传
}

// 上传失败
const onUploadError = (error: any, file: any) => {
  ElMessage.error(`${file.name} 上传失败`)
  console.error('上传失败:', error)
  uploading.value = false
}



// 开始上传
const startUpload = async () => {
  if (!uploadTargetPath.value) {
    ElMessage.warning('请选择上传目标分类')
    return
  }
  
  if (uploadFileList.value.length === 0) {
    ElMessage.warning('请选择要上传的文件')
    return
  }
  
  uploading.value = true
  
  try {
    console.log('开始上传，文件列表:', uploadFileList.value)
    console.log('目标路径:', uploadTargetPath.value)
    
    // 手动上传每个文件
    for (const fileInfo of uploadFileList.value) {
      if (fileInfo.raw) {
        await uploadSingleFile(fileInfo.raw)
      }
    }
    
    // 上传完成，清理状态
    cleanupAfterUpload()
    
  } catch (error) {
    console.error('上传失败:', error)
    ElMessage.error('上传失败')
    uploading.value = false
  }
}

// 文件选择变化
const onFileChange = (file: any, fileList: any[]) => {
  console.log('文件选择变化:', file, fileList)
  // 更新上传文件列表
  uploadFileList.value = fileList.map(f => ({
    name: f.name,
    size: f.size,
    raw: f.raw || f
  }))
  console.log('更新后的文件列表:', uploadFileList.value)
}

// 上传单个文件
const uploadSingleFile = async (file: File) => {
  try {
    console.log('开始上传文件:', file.name)
    console.log('文件大小:', file.size)
    console.log('目标路径:', uploadTargetPath.value)
    
    // 创建 FormData
    const formData = new FormData()
    formData.append('file', file)
    console.log('FormData 创建完成')
    
    // 调用上传接口
    console.log('调用 uploadKbFile 接口...')
    const result = await uploadKbFile(formData)
    console.log('文件上传成功，响应结果:', result)
    
    // 检查响应结构
    await addKbData({
          kb_path: uploadTargetPath.value || '',
          user_id: 'admin',
          doc_type: 'general',
          smart_title_parse: true,
          summary_image: true,
          summary_table: true,
          summary_txt: false,
          file_url: result.data.url,
          label: ''
        })
        await init() // 重新加载数据
    
  } catch (error) {
    console.error(`文件 ${file.name} 上传失败:`, error)
    ElMessage.error(`${file.name} 上传失败`)
    throw error
  }
}

// 上传完成后的清理工作
const cleanupAfterUpload = () => {
  uploading.value = false
  uploadFileList.value = []
  uploadTargetPath.value = ''
  showUploadDialog.value = false
}

// 表单数据
interface NewDirForm {
  title: string
  parentPath: string | null
  path: string
}

const newDirForm = ref<NewDirForm>({
  title: '',
  parentPath: null,
  path: ''
})

interface NewFragmentForm {
  fragment: string
  // name: string
  path: string
  labels: string[]
  content: string
}

const newFragmentForm = ref<NewFragmentForm>({
  fragment: '',
  // name: '',
  path: '',
  labels: [],
  content: ''
})

interface EditForm {
  id: string
  content: string
}

const editForm = ref<EditForm>({
  id: '',
  content: ''
})

interface EditDirForm {
  title: string
  path: string
  originalPath: string
}

const editDirForm = ref<EditDirForm>({
  title: '',
  path: '',
  originalPath: ''
})

// 表单验证规则
const dirFormRules = {
  title: [
    { required: true, message: '请输入分类名称', trigger: 'blur' }
  ]
}

const fragmentFormRules = {
  title: [
    { required: true, message: '请输入片段标题', trigger: 'blur' }
  ],
/*   name: [
    { required: true, message: '请输入文件名', trigger: 'blur' }
  ], */
  path: [
    { required: true, message: '请选择所属分类', trigger: 'change' }
  ]
}

// 树形组件配置
const defaultProps = {
  children: 'children' as const,
  label: 'title' as const
}

// 可用标签
const availableTags = ref<string[]>([
  '技术', '产品', '管理', '培训', '规范', '流程', '制度', '文档'
])

// 过滤后的片段列表
const filteredFragments = computed<Fragment[]>(() => {
  if (!searchKeyword.value) return fragmentList.value
  return fragmentList.value.filter(fragment => 
    fragment.fragment.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
    fragment.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
    fragment.labels.some(tag => tag.toLowerCase().includes(searchKeyword.value.toLowerCase()))
  )
})

// 监听表单变化，自动更新path值
watch(
  [() => newDirForm.value.parentPath, () => newDirForm.value.title],
  ([parentPath, title]) => {
    if (title) {
      if (parentPath) {
        newDirForm.value.path = `${parentPath}-->${title}`
      } else {
        newDirForm.value.path = title
      }
    } else {
      newDirForm.value.path = ''
    }
  },
  { immediate: true }
)

// 监听编辑分类表单变化，自动更新path值
watch(
  () => editDirForm.value.title,
  (title) => {
    if (title && editDirForm.value.originalPath) {
      // 从原始路径中提取父级路径
      const pathParts = editDirForm.value.originalPath.split('-->')
      if (pathParts.length > 1) {
        const parentPath = pathParts.slice(0, -1).join('-->')
        editDirForm.value.path = `${parentPath}-->${title}`
      } else {
        editDirForm.value.path = title
      }
    } else if (title) {
      editDirForm.value.path = title
    } else {
      editDirForm.value.path = ''
    }
  },
  { immediate: true }
)

// 监听编辑弹窗关闭，清理编辑器
watch(editDialogVisible, (newVal) => {
  if (!newVal && editorRef.value) {
    // 弹窗关闭时清理编辑器
    editorRef.value.destroy()
    editorRef.value = null
  }
})

// 监听新建分类弹窗关闭，重置表单验证状态
watch(showNewDirDialog, (newVal) => {
  if (!newVal) {
    // 弹窗关闭时重置表单验证状态
    nextTick(() => {
      if (newDirFormRef.value) {
        newDirFormRef.value.clearValidate()
      }
    })
  }
})

// 监听编辑分类弹窗关闭，重置表单验证状态
watch(editDirDialogVisible, (newVal) => {
  if (!newVal) {
    // 弹窗关闭时重置表单验证状态
    nextTick(() => {
      if (editDirFormRef.value) {
        editDirFormRef.value.clearValidate()
      }
    })
  }
})

// 监听新建片段弹窗关闭，重置表单验证状态
watch(showNewFragmentDialog, (newVal) => {
  if (!newVal) {
    // 弹窗关闭时重置表单验证状态
    nextTick(() => {
      if (newFragmentFormRef.value) {
        newFragmentFormRef.value.clearValidate()
      }
    })
  }
})

// 监听片段详情弹窗关闭，清理数据
watch(detailDialogVisible, (newVal) => {
  if (!newVal) {
    // 弹窗关闭时清理当前片段数据
    currentFragment.value = null
  }
})

// 监听上传对话框状态，重置拖拽状态
watch(showUploadDialog, (newVal) => {
  if (!newVal) {
    // 重置拖拽状态
    isDragOver.value = false
    // 重置上传相关状态
    uploadFileList.value = []
    uploadTargetPath.value = ''
  }
})

// 找到第一个目录中一直往下直到没有children的节点
const findFirstDeepestPath = (node: TreeNode): string | null => {
  if (node.children && node.children.length > 0) {
    // 选择第一个子节点，而不是最后一个
    return findFirstDeepestPath(node.children[0])
  }
  return node.path
}

// 找到最深层的子节点（保留原有逻辑，以防其他地方需要）
const findDeepestChild = (node: TreeNode): TreeNode | null => {
  if (node.children && node.children.length > 0) {
    return findDeepestChild(node.children[node.children.length - 1]!)
  }
  return node
}

// 找到最深层的节点路径（保留原有逻辑，以防其他地方需要）
const findDeepestPath = (node: TreeNode): string | null => {
  if (node.children && node.children.length > 0) {
    return findDeepestPath(node.children[node.children.length - 1]!)
  }
  return node.path
}

// 添加全局拖拽事件监听
const addGlobalDragListeners = () => {
  const treeContent = document.querySelector('.tree-content')
  if (treeContent) {
    treeContent.addEventListener('dragover', (e) => {
      e.preventDefault()
      e.stopPropagation()
    })
    
    treeContent.addEventListener('drop', (e) => {
      e.preventDefault()
      e.stopPropagation()
      handleFileDrop(e as DragEvent)
    })
    
    treeContent.addEventListener('dragenter', (e) => {
      e.preventDefault()
      e.stopPropagation()
      isDragOver.value = true
    })
    
    treeContent.addEventListener('dragleave', (e) => {
      e.preventDefault()
      e.stopPropagation()
      isDragOver.value = false
    })
  }
}

// 初始化数据
const init = async (): Promise<void> => {
  try {
    treeLoading.value = true
    // 获取知识库树
    const treeRes = await dirTree()
    console.log(treeRes)
    knowledgeTree.value = treeRes?.data?.list_path || []
    console.log(knowledgeTree.value)
    
    // 获取片段列表（默认获取第一个目录的片段）
    if (knowledgeTree.value.length > 0) {
      // 找到第一个目录中一直往下直到没有children的节点
      const firstDir = knowledgeTree.value[0]
      const firstDeepestPath = findFirstDeepestPath(firstDir)
      if (firstDeepestPath) {
        currentNode.value = firstDeepestPath
        // 等待DOM更新后设置树组件的当前节点
        await nextTick()
        if (treeRef.value) {
          treeRef.value.setCurrentKey(firstDeepestPath)
        }
        await loadFragments(firstDeepestPath)
      }
    }
    
    console.log('企业知识库初始化完成')
  } catch (error) {
    console.error('初始化失败:', error)
    ElMessage.error('初始化失败')
    fragmentList.value.content = ''
    fragmentList.value.labels = []
    knowledgeTree.value = []
  } finally {
    treeLoading.value = false
  }
}

// 处理HTML内容，添加样式并包装在div中
const processHtmlContent = (htmlContent: string): string => {
  if (!htmlContent) return ''

  // 首先处理换行符，将\n转换为<br>标签
  let processedContent = htmlContent
    .replace(/\\n/g, '<br>')  // 将\n转换为<br>
    .replace(/\n/g, '<br>')   // 将实际的换行符也转换为<br>

  // 创建临时DOM元素来解析HTML
  const tempDiv = document.createElement('div')
  tempDiv.innerHTML = processedContent

  // 为图片添加样式
  const images = tempDiv.querySelectorAll('img')
  images.forEach(img => {
    img.style.maxWidth = '100%'
    img.style.height = 'auto'
    img.style.borderRadius = '8px'
    img.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)'
    img.style.margin = '8px 0'
    img.style.display = 'block'
  })

  // 为表格添加样式
  const tables = tempDiv.querySelectorAll('table')
  tables.forEach(table => {
    table.style.width = '100%'
    table.style.borderCollapse = 'collapse'
    table.style.borderRadius = '8px'
    table.style.overflow = 'hidden'
    table.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)'
    table.style.margin = '16px 0'

    // 为表头添加样式
    const headers = table.querySelectorAll('th')
    headers.forEach(th => {
      th.style.backgroundColor = '#f8fafc'
      th.style.padding = '12px 16px'
      th.style.textAlign = 'left'
      th.style.fontWeight = '600'
      th.style.color = '#374151'
      th.style.borderBottom = '1px solid #e5e7eb'
    })

    // 为表格单元格添加样式
    const cells = table.querySelectorAll('td')
    cells.forEach(td => {
      td.style.padding = '12px 16px'
      td.style.borderBottom = '1px solid #f3f4f6'
      td.style.color = '#374151'
    })

    // 为表格行添加悬停效果
    const rows = table.querySelectorAll('tr')
    rows.forEach((row, index) => {
      if (index % 2 === 0) {
        row.style.backgroundColor = '#ffffff'
      } else {
        row.style.backgroundColor = '#f9fafb'
      }

      // 添加悬停效果
      row.addEventListener('mouseenter', () => {
        row.style.backgroundColor = '#f0f9ff'
      })

      row.addEventListener('mouseleave', () => {
        row.style.backgroundColor = index % 2 === 0 ? '#ffffff' : '#f9fafb'
      })
    })
  })

  // 为其他元素添加基本样式
  const paragraphs = tempDiv.querySelectorAll('p')
  paragraphs.forEach(p => {
    p.style.margin = '8px 0'
    p.style.lineHeight = '1.6'
    p.style.color = '#374151'
  })

  const headings = tempDiv.querySelectorAll('h1, h2, h3, h4, h5, h6')
  headings.forEach(heading => {
    const element = heading as HTMLElement
    element.style.margin = '16px 0 8px 0'
    element.style.color = '#1f2937'
    element.style.fontWeight = '600'
  })

  const lists = tempDiv.querySelectorAll('ul, ol')
  lists.forEach(list => {
    const element = list as HTMLElement
    element.style.margin = '8px 0'
    element.style.paddingLeft = '24px'
    element.style.color = '#374151'
  })

  const listItems = tempDiv.querySelectorAll('li')
  listItems.forEach(li => {
    const element = li as HTMLElement
    element.style.margin = '4px 0'
    element.style.lineHeight = '1.5'
  })

  // 将处理后的内容包装在div中
  const wrapperDiv = document.createElement('div')
  wrapperDiv.className = 'processed-content'
  wrapperDiv.style.padding = '16px'
  wrapperDiv.style.lineHeight = '1.6'
  wrapperDiv.style.color = '#374151'
  wrapperDiv.style.fontSize = '14px'
  wrapperDiv.innerHTML = tempDiv.innerHTML

  return wrapperDiv.outerHTML
}

// 加载指定目录的片段
const loadFragments = async (dirPath: string): Promise<void> => {
  try {
    tableLoading.value = true
    // 调用API获取指定路径的片段数据
    const res = await fragments({ 
      kb_path: dirPath 
    })
    if (res.code === 200) {
      // res.data?.list_path 直接返回HTML结构字符串
      const htmlContent = res.data?.list_path
      if (htmlContent) {
        // 检查是否已经被处理过（包含processed-content类名）
        if (htmlContent.includes('processed-content')) {
          // 如果已经被处理过，直接使用
          fragmentList.value.content = htmlContent
        } else {
          // 如果没有被处理过，进行处理
          fragmentList.value.content = processHtmlContent(htmlContent)
        }
      } else {
        fragmentList.value.content = ''
      }
      // 保持labels为空数组
      fragmentList.value.labels = []
    } else {
      // 如果API调用失败，使用默认的空数组
      fragmentList.value.content = ''
      fragmentList.value.labels = []
    }
    
    console.log(`加载目录 "${dirPath}" 的片段，共 ${fragmentList.value.length} 个`)
  } catch (error) {
    console.error('获取片段失败:', error)
    ElMessage.error('获取片段失败')
    // 出错时使用默认的空数组
    fragmentList.value.content = ''
    fragmentList.value.labels = []
  } finally {
    tableLoading.value = false
  }
}

// 处理树节点点击
const handleTreeNodeClick = async (data: any) => {
  try {
    currentNode.value = data.path

    // 只有最子级目录才调用接口
    if (isLeafNode(data)) {
      await loadFragments(data.path)
    } else {
      // 如果不是最子级目录，设置content为null，显示提示信息
      fragmentList.value.content = null
      fragmentList.value.labels = []
    }
  } catch (error) {
    console.error('加载片段失败:', error)
  }
}

// 处理树操作
const handleTreeAction = (command: string, data: any) => {
  switch (command) {
    case 'add':
      newDirForm.value.parentPath = data.path
      showNewDirDialog.value = true
      break
    case 'upload':
      uploadTargetPath.value = data.path
      showUploadDialog.value = true
      break
    case 'edit':
      // 编辑分类逻辑
      editDirForm.value.title = data.title
      editDirForm.value.originalPath = data.path
      editDirForm.value.path = data.path
      editDirDialogVisible.value = true
      break
    case 'delete':
      // 直接删除，不做限制
      handleDeleteDir(data)
      break
  }
}

// 删除分类
const handleDeleteDir = async (data: any) => {
  try {
    await ElMessageBox.confirm(
      '',
      '确认删除',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'custom-delete-dialog',
        dangerouslyUseHTMLString: true,
        message: `
          <div class="delete-confirm-content">
            <div class="delete-icon">
              <i class="el-icon-warning"></i>
            </div>
            <div class="delete-title">删除确认</div>
            <div class="delete-message">
              您即将删除分类：<strong>"${data.title}"</strong>
            </div>
            <div class="delete-path">
              完整路径：<span class="path-text">${data.path}</span>
            </div>
            <div class="delete-warning">
              <i class="el-icon-info"></i>
              删除后无法恢复，请谨慎操作
            </div>
          </div>
        `
      }
    )
    
    // 这里应该调用删除分类的API
    ElMessage.success('删除成功')
    await init() // 重新加载数据
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 确认新建分类
const confirmNewDir = async () => {
  try {
    await newDirFormRef.value.validate()
    
    // 生成完整的path值
    if (newDirForm.value.parentPath) {
      newDirForm.value.path = `${newDirForm.value.parentPath}-->${newDirForm.value.title}`
    } else {
      newDirForm.value.path = newDirForm.value.title
    }
    
    console.log('新建分类数据:', newDirForm.value)
    
    // 这里应该调用新建分类的API
    ElMessage.success('创建成功')
    showNewDirDialog.value = false
    newDirForm.value = { title: '', parentPath: null, path: '' }
    await init() // 重新加载数据
  } catch (error) {
    console.error('创建失败:', error)
  }
}

// 确认新建片段
const confirmNewFragment = async () => {
  try {
    await newFragmentFormRef.value.validate()
    
    // 这里应该调用新建片段的API
    ElMessage.success('创建成功')
    showNewFragmentDialog.value = false
    newFragmentForm.value = { fragment: '', name: '', path: '', labels: [], content: '' }
    await init() // 重新加载数据
  } catch (error) {
    console.error('创建失败:', error)
  }
}

// 查看片段
const handleView = (fragment: Fragment) => {
  currentFragment.value = fragment
  detailDialogVisible.value = true
}

// 编辑片段
const handleEdit = (fragment: Fragment) => {
  editForm.value = { 
    id: fragment.know_id, 
    content: fragment.content 
  }
  editDialogVisible.value = true
  // 等待DOM更新后设置编辑器内容
  nextTick(() => {
    if (editorRef.value) {
      editorRef.value.setHtml(fragment.content)
    }
  })
}

// 确认编辑片段
const confirmEditFragment = async () => {
  try {
    // 获取编辑器的HTML内容
    if (editorRef.value) {
      editForm.value.content = editorRef.value.getHtml()
    }
    
    // 这里应该调用编辑片段的API，传递整个内容
    console.log('编辑片段数据:', editForm.value)
    
    // 这里应该调用编辑片段的API
    ElMessage.success('保存成功')
    editDialogVisible.value = false
    // 清理编辑器状态
    if (editorRef.value) {
      editorRef.value.destroy()
      editorRef.value = null
    }
    await init() // 重新加载数据
  } catch (error) {
    console.error('保存失败:', error)
  }
}

// 删除片段
const handleDelete = async (fragment: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除片段"${fragment.fragment}"吗？删除后无法恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 这里应该调用删除片段的API
    ElMessage.success('删除成功')
    await init() // 重新加载数据
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 确认编辑分类
const confirmEditDir = async () => {
  try {
    await editDirFormRef.value.validate()
    
    console.log('编辑分类数据:', editDirForm.value)
    
    // 这里应该调用编辑分类的API
    ElMessage.success('编辑成功')
    editDirDialogVisible.value = false
    editDirForm.value = { title: '', path: '', originalPath: '' }
    await init() // 重新加载数据
  } catch (error) {
    console.error('编辑失败:', error)
  }
}

// 监听父分类或标题变化，自动更新路径
watch(() => newDirForm.value.parentPath, async (newVal, oldVal) => {
  if (newVal !== oldVal) {
    if (newVal) {
      newDirForm.value.path = `${newVal}-->${newDirForm.value.title}`
    } else {
      newDirForm.value.path = newDirForm.value.title
    }
  }
}, { immediate: true })

watch(() => newDirForm.value.title, async (newVal, oldVal) => {
  if (newVal !== oldVal) {
    if (newDirForm.value.parentPath) {
      newDirForm.value.path = `${newDirForm.value.parentPath}-->${newDirForm.value.title}`
    } else {
      newDirForm.value.path = newDirForm.value.title
    }
  }
}, { immediate: true })

// 组件挂载时初始化
onMounted(() => {
  init()
  // 添加拖拽事件监听器
  nextTick(() => {
    addGlobalDragListeners()
  })
  
  // 添加全局拖拽状态重置
  window.addEventListener('dragend', () => {
    console.log('全局拖拽结束，重置状态')
    isDragOver.value = false
  })
  
  // 添加页面可见性变化监听，确保拖拽状态正确
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      console.log('页面隐藏，重置拖拽状态')
      isDragOver.value = false
    }
  })
})

// 判断是否为最子级目录（没有子节点）
const isLeafNode = (node: TreeNode): boolean => {
  return !node.children || node.children.length === 0
}
</script>

<style lang="scss" scoped>
// 美化样式
.knowledge-page {
  background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
  // min-height: 100vh;
  padding: 24px;
  color: #1f2937;
  height:100%
}

.knowledge-content {
  display: flex;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  height:100%
}

// 左侧知识树
.knowledge-tree {
  width: 320px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s ease;
  
  // 拖拽状态样式
  &.drag-over {
    background: rgba(59, 130, 246, 0.08);
    border: 2px dashed #3b82f6;
    border-radius: 16px;
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
  }
  
      .tree-header {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(29, 78, 216, 0.05) 100%);
      padding: 20px;
      border-bottom: 1px solid rgba(59, 130, 246, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      
      h3 {
        margin: 0;
        color: #1f2937;
        font-size: 18px;
        font-weight: 600;
      }
      
      .header-actions {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      
      .upload-doc-btn {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        border: none;
        color: white;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }
      }
      
      .add-category-btn {
        background: var(--ai-gradient-primary);
        border: none;
        color: white;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
      }
    }
  
  .tree-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    position: relative;
    transition: all 0.3s ease;
    
    // 拖拽覆盖层
    .drag-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
      pointer-events: none;
      transition: all 0.3s ease;
      border-radius: 12px;
      
      &.drag-over {
        pointer-events: all;
        background: rgba(59, 130, 246, 0.08);
        border: 2px dashed #3b82f6;
        transform: scale(1.02);
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
      }
    }
    
    // 拖拽提示样式
    .drag-hint {
      margin-top: 20px;
      padding: 20px;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);
      border: 2px dashed rgba(59, 130, 246, 0.3);
      border-radius: 12px;
      text-align: center;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: rgba(59, 130, 246, 0.5);
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.08) 100%);
      }
      
      .hint-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        
        .hint-icon {
          font-size: 32px;
          color: #3b82f6;
        }
        
        .hint-text {
          .hint-title {
            font-size: 16px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 4px;
          }
          
          .hint-desc {
            font-size: 13px;
            color: #6b7280;
          }
        }
      }
    }
    
    :deep(.el-tree__empty-block){
      display: none;
    }
    
    .tree-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 300px;
      color: #909399;
      
      .custom-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        
        .empty-icon {
          margin-bottom: 16px;
          opacity: 0.6;
        }
        
        .empty-text {
          color: #909399;
          font-size: 16px;
          margin-bottom: 24px;
          font-weight: 500;
        }
        
        .el-button {
          border-radius: 6px;
          padding: 12px 24px;
          font-weight: 500;
          box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
          transition: all 0.3s ease;
          
          .el-icon {
            margin-right: 8px;
          }
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
          }
        }
      }
    }
  }
}

.knowledge-tree-component {
  :deep(.el-tree-node__content) {
    height: 40px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: all 0.3s ease;
    padding: 0 8px;
    min-width: 0;
    display: flex;
    align-items: center;
    
    &:hover {
      background: rgba(59, 130, 246, 0.05);
    }
  }
  
  :deep(.el-tree-node.is-current > .el-tree-node__content) {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.2);
  }
  
  .tree-node {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    position: relative;
    min-width: 0;
    
    .node-icon {
      color: #3b82f6;
      font-size: 16px;
      flex-shrink: 0;
      width: 16px;
    }
    
    .node-label {
      flex: 1;
      font-size: 14px;
      color: #374151;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      max-width: 200px;
      cursor: pointer;
      position: relative;
      
      &:hover::after {
        content: attr(title);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
        margin-bottom: 5px;
      }
      
      &:hover::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.8);
        margin-bottom: 1px;
        z-index: 1000;
        pointer-events: none;
      }
    }
    
    .node-actions {
      opacity: 1;
      transition: opacity 0.3s ease;
      flex-shrink: 0;
      position: relative;
      z-index: 100;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 4px;
      padding: 2px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .action-icon {
        color: #6b7280;
        font-size: 14px;
        padding: 4px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(59, 130, 246, 0.1);
          color: #3b82f6;
        }
      }
    }
    
    &:hover .node-actions {
      opacity: 1;
      background: rgba(255, 255, 255, 1);
    }
  }
}

.tree-dropdown {
  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(59, 130, 246, 0.1);
      color: #3b82f6;
    }
    
    &.danger:hover {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }
    
    .el-icon {
      font-size: 14px;
    }
  }
}

// 右侧知识列表
.knowledge-list {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  
  .list-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(29, 78, 216, 0.05) 100%);
    padding: 20px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    
    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      
      h3 {
        margin: 0;
        color: #1f2937;
        font-size: 18px;
        font-weight: 600;
      }
      
      .fragment-count {
        color: #6b7280;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.8);
        padding: 4px 12px;
        border-radius: 20px;
        border: 1px solid rgba(59, 130, 246, 0.1);
      }
    }
    
    .header-right {
      display: flex;
      align-items: center;
      gap: 16px;
      
      .search-input {
        width: 280px;
        
        :deep(.el-input__wrapper) {
          background: rgba(255, 255, 255, 0.9);
          border: 1px solid rgba(59, 130, 246, 0.2);
          border-radius: 8px;
          transition: all 0.3s ease;
          
          &:hover {
            border-color: rgba(59, 130, 246, 0.3);
          }
          
          &.is-focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
          }
        }
      }
      
      .add-fragment-btn {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
        border: none;
        color: white;
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          transition: left 0.5s;
        }
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
          
          &::before {
            left: 100%;
          }
        }
      }
    }
  }
  
  .list-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    position: relative;
    max-height: calc(100vh - 200px); /* 设置最大高度，确保可以滚动 */

    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(59, 130, 246, 0.05);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(59, 130, 246, 0.3);
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(59, 130, 246, 0.5);
      }
    }

    .fragment-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 300px;
      color: #909399;
      
      .custom-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        
        .empty-icon {
          margin-bottom: 16px;
          opacity: 0.6;
        }
        
        .empty-text {
          color: #909399;
          font-size: 16px;
          margin-bottom: 24px;
          font-weight: 500;
        }
        
        .el-button {
          border-radius: 6px;
          padding: 12px 24px;
          font-weight: 500;
          box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
          transition: all 0.3s ease;
          
          .el-icon {
            margin-right: 8px;
          }
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
          }
        }
      }
    }
    .fragment-content{
      overflow-y: visible; /* 改为visible，让内容完全显示 */
      overflow-x: hidden;
      padding: 16px;
      position: relative;
      transition: all 0.3s ease;
      min-height: 100%; /* 确保最小高度 */

      // 处理后的内容样式
      :deep(.processed-content) {
        padding: 16px;
        line-height: 1.6;
        color: #374151;
        font-size: 14px;

        // 图片样式
        img {
          max-width: 100% !important;
          height: auto !important;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          margin: 8px 0;
          display: block;
          transition: transform 0.3s ease;

          &:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
          }
        }

        // 表格样式
        table {
          width: 100% !important;
          border-collapse: collapse !important;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          margin: 16px 0;
          background: white;

          th {
            background-color: #f8fafc !important;
            padding: 12px 16px !important;
            text-align: left !important;
            font-weight: 600 !important;
            color: #374151 !important;
            border-bottom: 1px solid #e5e7eb !important;
            font-size: 14px;
          }

          td {
            padding: 12px 16px !important;
            border-bottom: 1px solid #f3f4f6 !important;
            color: #374151 !important;
            font-size: 14px;
          }

          tr {
            transition: background-color 0.3s ease;

            &:nth-child(even) {
              background-color: #ffffff;
            }

            &:nth-child(odd) {
              background-color: #f9fafb;
            }

            &:hover {
              background-color: #f0f9ff !important;
            }
          }
        }

        // 段落样式
        p {
          margin: 8px 0 !important;
          line-height: 1.6 !important;
          color: #374151 !important;
          font-size: 14px;
        }

        // 标题样式
        h1, h2, h3, h4, h5, h6 {
          margin: 16px 0 8px 0 !important;
          color: #1f2937 !important;
          font-weight: 600 !important;

          &:first-child {
            margin-top: 0 !important;
          }
        }

        h1 { font-size: 24px; }
        h2 { font-size: 20px; }
        h3 { font-size: 18px; }
        h4 { font-size: 16px; }
        h5 { font-size: 15px; }
        h6 { font-size: 14px; }

        // 列表样式
        ul, ol {
          margin: 8px 0 !important;
          padding-left: 24px !important;
          color: #374151 !important;
        }

        li {
          margin: 4px 0 !important;
          line-height: 1.5 !important;
          font-size: 14px;
        }

        // 链接样式
        a {
          color: #3b82f6;
          text-decoration: none;
          transition: color 0.3s ease;

          &:hover {
            color: #1d4ed8;
            text-decoration: underline;
          }
        }

        // 代码样式
        code {
          background-color: #f1f5f9;
          color: #e11d48;
          padding: 2px 6px;
          border-radius: 4px;
          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          font-size: 13px;
        }

        pre {
          background-color: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          padding: 16px;
          overflow-x: auto;
          margin: 16px 0;

          code {
            background: none;
            color: #374151;
            padding: 0;
          }
        }

        // 引用样式
        blockquote {
          border-left: 4px solid #3b82f6;
          background-color: #f8fafc;
          margin: 16px 0;
          padding: 16px;
          border-radius: 0 8px 8px 0;
          color: #4b5563;
          font-style: italic;
        }

        // 分割线样式
        hr {
          border: none;
          height: 1px;
          background: linear-gradient(to right, transparent, #e5e7eb, transparent);
          margin: 24px 0;
        }

        // 换行标签样式
        br {
          line-height: 1.6;
        }
      }
    }

    .el-table {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      
      .el-table__header {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        
        .el-table__cell {
          background: #ffffff;
          color: #374151;
          font-weight: 600;
          border-bottom: 1px solid #e4e7ed;
        }
      }
      
      .el-table__body {
        .el-table__row {
          &:hover {
            background-color: #f8fafc;
          }
          
          .el-table__cell {
            border-bottom: 1px solid #f1f5f9;
            padding: 12px 0;
          }
        }
      }
    }
  }
}

.fragment-table {
  :deep(.el-table) {
    border-radius: 12px;
  overflow: hidden;
    
    .el-table__header {
      background: rgba(249, 250, 251, 0.8);
      
      th {
        color: #374151 !important;
  font-weight: 600;
        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
        padding: 16px 0;
        font-size: 14px;
        height: 56px;
        line-height: 56px;
      }
    }
    
    .el-table__body {
      tr {
        height: 64px !important;
        line-height: 64px !important;
        transition: background-color 0.3s ease;
  position: relative;
        border-bottom: 1px solid rgba(59, 130, 246, 0.08);
        box-sizing: border-box;
        isolation: isolate;
        contain: layout;
        
        &:hover {
          background: rgba(59, 130, 246, 0.08) !important;
          transform: none !important;
          box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1) !important;
        }
        
        td {
          border-bottom: 1px solid rgba(59, 130, 246, 0.08);
          padding: 16px 0;
          height: 64px !important;
          line-height: 64px !important;
          vertical-align: middle;
          position: relative;
          box-sizing: border-box;
          background: inherit;
          contain: layout;
          
          // 确保表格单元格内的div完全覆盖
          .el-table__cell {
            background: inherit !important;
            position: relative;
            z-index: 1;
            
            div {
              background: inherit !important;
              position: relative;
              z-index: 2;
            }
          }
        }
      }
    }
  }
}

.fragment-title {
  display: flex;
  align-items: center;
  gap: 10px;
  
  .fragment-icon {
    color: #3b82f6;
    font-size: 18px;
    background: rgba(59, 130, 246, 0.1);
    padding: 6px;
    border-radius: 6px;
  }
  
  span {
    color: #1f2937;
    font-weight: 500;
  font-size: 14px;
  }
}

.fragment-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  
  .fragment-tag {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #2563eb;
    border-radius: 6px;
    font-size: 11px;
    padding: 4px 10px;
    transition: all 0.3s ease;
    font-weight: 500;
    
    &:hover {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
      border-color: rgba(59, 130, 246, 0.3);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    }
  }
}

.fragment-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 9999;
  background: white;
  padding: 8px;
  border-radius: 8px;
  min-width: 220px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(59, 130, 246, 0.2);
  margin: -8px;
  transform: scale(1.05);
  
  .el-button {
    color: #6b7280;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    min-width: 60px;
  display: flex;
  align-items: center;
    justify-content: center;
  gap: 4px;
  position: relative;
    z-index: 11;
    
    &:hover {
      // 移除transform，防止重叠
    }
    
    &.el-button--primary {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
      border: 1px solid rgba(59, 130, 246, 0.25);
      color: #2563eb;
      font-weight: 600;
      
      &:hover {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
        border-color: rgba(59, 130, 246, 0.4);
        color: #1d4ed8;
        // 移除transform，防止重叠
      }
    }
    
    &.el-button--danger {
      background: rgba(239, 68, 68, 0.08);
      border-color: rgba(239, 68, 68, 0.2);
      color: #ef4444;
      
      &:hover {
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.3);
        color: #dc2626;
      }
    }
    
    .el-icon {
  font-size: 14px;
    }
  }
}

// 自定义加载动画样式
:deep(.el-loading-spinner) {
  .el-loading-text {
    color: #3b82f6;
    font-size: 14px;
    font-weight: 500;
  }
  
  .circular {
    width: 32px;
    height: 32px;
    animation: loading-rotate 2s linear infinite;
  }
  
  .path {
    stroke: #3b82f6;
    stroke-width: 2;
    stroke-linecap: round;
    animation: loading-dash 1.5s ease-in-out infinite;
  }
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

// 对话框样式
.knowledge-dialog {
  :deep(.el-dialog) {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.1);
  }
  
  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(29, 78, 216, 0.05) 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    padding: 24px 28px;
  }
  
  :deep(.el-dialog__body) {
    padding: 28px;
    background: white;
  }
  
  :deep(.el-dialog__footer) {
    background: rgba(248, 250, 252, 0.8);
    border-top: 1px solid rgba(59, 130, 246, 0.1);
    padding: 20px 28px;
  }
  
  :deep(.el-dialog__title) {
    color: #1f2937;
    font-weight: 700;
    font-size: 18px;
  }
  
  :deep(.el-form-item__label) {
    color: #374151;
    font-weight: 600;
  font-size: 14px;
}

  :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: rgba(59, 130, 246, 0.3);
    }
    
    &.is-focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
  }
  
  :deep(.el-tree-select) {
    .el-input__wrapper {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(59, 130, 246, 0.2);
      border-radius: 10px;
    }
  }
  
  :deep(.el-select) {
    .el-input__wrapper {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(59, 130, 246, 0.2);
      border-radius: 10px;
    }
  }
  
:deep(.el-button) {
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    
    &.el-button--primary {
      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
      border: none;
      color: white;
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
      }
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
        
        &::before {
          left: 100%;
        }
      }
    }
    
    &.el-button--default {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(59, 130, 246, 0.2);
      color: #6b7280;
      
      &:hover {
        border-color: #3b82f6;
        color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
        transform: translateY(-1px);
      }
    }
  }
  
  .dialog-footer {
  display: flex;
    justify-content: flex-end;
    gap: 16px;
  }
}

.edit-dialog {
  :deep(.el-overlay) {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
  }
  
  :deep(.el-dialog) {
    margin: 5vh auto !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2001 !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    
    .el-dialog__header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
      color: white !important;
      border-radius: 8px 8px 0 0 !important;
      padding: 20px !important;
      
      .el-dialog__title {
        color: white !important;
        font-size: 18px !important;
        font-weight: 600 !important;
      }
      
      .el-dialog__headerbtn {
        .el-dialog__close {
          color: white !important;
          font-size: 20px !important;
          
          &:hover {
            color: #f0f0f0 !important;
          }
        }
      }
    }
    
    .el-dialog__body {
      flex: 1 !important;
      overflow: hidden !important;
      padding: 24px !important;
      background: #fafbfc !important;
    }
    
    .el-dialog__footer {
      flex-shrink: 0 !important;
      padding: 20px 24px !important;
      border-top: 1px solid #e4e7ed !important;
      background: white !important;
      border-radius: 0 0 8px 8px !important;
      
      .dialog-footer {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        
        .el-button {
          border-radius: 6px !important;
          padding: 10px 20px !important;
          font-weight: 500 !important;
          
          &.el-button--default {
            border-color: #dcdfe6 !important;
            color: #606266 !important;
            
            &:hover {
              border-color: #c0c4cc !important;
              color: #409eff !important;
            }
          }
          
          &.el-button--primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            border: none !important;
            
            &:hover {
              background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
              transform: translateY(-1px) !important;
              box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
            }
          }
        }
      }
    }
  }
  
  .editor-container {
    border: 1px solid #e4e7ed !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    height: 100% !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    
    .w-e-toolbar {
      border-bottom: 1px solid #e4e7ed !important;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
      flex-shrink: 0 !important;
      padding: 8px 12px !important;
      
      .w-e-bar-item {
        button {
          border-radius: 4px !important;
          transition: all 0.2s ease !important;
          
          &:hover {
            background-color: #e2e8f0 !important;
            transform: translateY(-1px) !important;
          }
        }
      }
    }
    
    .w-e-text-container {
      background-color: #fff !important;
      flex: 1 !important;
      padding: 16px !important;
      
      .w-e-text {
        background: transparent !important;
        color: #374151 !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        
        &::placeholder {
          color: #9ca3af !important;
          font-style: italic !important;
        }
      }
    }
  }
  
  .el-form-item {
    margin-bottom: 0 !important;
    height: 100% !important;
    
    .el-form-item__label {
      color: #374151 !important;
      font-weight: 600 !important;
      font-size: 14px !important;
      margin-bottom: 8px !important;
    }
    
    .el-form-item__content {
      height: 100% !important;
      
      .editor-container {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
      }
    }
  }
}

// 内容编辑器样式
.content-editor-wrapper {
  width: 100%;
  
  .content-preview {
    width: 100%;
    min-height: 120px;
    max-height: 30vh;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    
    &:hover {
      border-color: #3b82f6;
      background: rgba(59, 130, 246, 0.02);
    }
    
    .placeholder-text {
      color: #9ca3af;
      font-style: italic;
      text-align: center;
      padding: 40px 0;
    }
    
    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(59, 130, 246, 0.05);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(59, 130, 246, 0.3);
      border-radius: 3px;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(59, 130, 246, 0.5);
      }
    }
  }
  
  .content-actions {
    margin-top: 8px;
    text-align: right;
  }
  
  // 响应式高度适配
  @media (min-width: 1600px) {
    .content-preview {
      max-height: 40vh;
    }
  }
  
  @media (max-width: 1399px) and (min-width: 1200px) {
    .content-preview {
      max-height: 35vh;
    }
  }
  
  @media (max-width: 1199px) and (min-width: 768px) {
    .content-preview {
      max-height: 30vh;
    }
  }
  
  @media (max-width: 767px) and (min-width: 480px) {
    .content-preview {
      max-height: 20vh;
      min-height: 100px;
    }
  }
  
  @media (max-width: 479px) {
    .content-preview {
      max-height: 30vh;
      min-height: 80px;
    }
  }
}

// 上传弹窗样式
.upload-dialog {
  .upload-container {
    .upload-area {
      margin-bottom: 24px;
      
      .upload-component {
        .el-upload-dragger {
          border: 2px dashed #d1d5db;
          border-radius: 12px;
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(37, 99, 235, 0.02) 100%);
          transition: all 0.3s ease;
          
          &:hover {
            border-color: #3b82f6;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);
          }
          
          .el-icon--upload {
            font-size: 48px;
            color: #3b82f6;
            margin-bottom: 16px;
          }
          
          .el-upload__text {
            color: #374151;
            font-size: 16px;
            
            em {
              color: #3b82f6;
              font-style: normal;
              font-weight: 600;
            }
          }
          
          .el-upload__tip {
            color: #6b7280;
            font-size: 13px;
            margin-top: 12px;
          }
        }
      }
    }
    
    .upload-target {
      h4 {
        margin: 0 0 12px 0;
        color: #1f2937;
        font-size: 16px;
        font-weight: 600;
      }
      
      .upload-tree-select {
        width: 100%;
      }
    }
  }
}

// 美化的删除确认弹窗样式
:deep(.custom-delete-dialog) {
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  
  .el-message-box__header {
    padding: 24px 24px 0;
    border-bottom: none;
    
    .el-message-box__title {
      font-size: 18px;
      font-weight: 600;
      color: #1f2937;
    }
  }
  
  .el-message-box__content {
    padding: 20px 24px;
    
    .delete-confirm-content {
      text-align: center;
      
      .delete-icon {
        margin-bottom: 20px;
        
        i {
          font-size: 56px;
          color: #f59e0b;
          background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
      }
      
      .delete-title {
        font-size: 22px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 16px;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      
      .delete-message {
        font-size: 16px;
        color: #374151;
        margin-bottom: 16px;
        line-height: 1.6;
        
        strong {
          color: #3b82f6;
          font-weight: 700;
          font-size: 18px;
        }
      }
      
      .delete-path {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 20px;
        padding: 12px 16px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.08) 100%);
        border: 1px solid rgba(59, 130, 246, 0.15);
        border-radius: 10px;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        word-break: break-all;
        line-height: 1.4;
        
        .path-text {
          color: #3b82f6;
          font-weight: 500;
        }
      }
      
      .delete-warning {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 20px;
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
        border: 1px solid rgba(239, 68, 68, 0.25);
        border-radius: 12px;
        color: #dc2626;
        font-size: 14px;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
        
        i {
          font-size: 18px;
          color: #ef4444;
        }
      }
    }
  }
  
  .el-message-box__btns {
    padding: 0 24px 24px;
    
    .el-button {
      padding: 12px 28px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 10px;
      transition: all 0.3s ease;
      min-width: 100px;
      
      &.el-button--default {
        border: 2px solid #d1d5db;
        color: #6b7280;
        background: white;
        
        &:hover {
          border-color: #9ca3af;
          color: #374151;
          background: #f9fafb;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
      }
      
      &.el-button--primary {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        border: 2px solid #ef4444;
        color: white;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
        
        &:hover {
          background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
          border-color: #dc2626;
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .knowledge-content {
    flex-direction: column;
    gap: 20px;
  }
  
  .knowledge-tree {
    width: 100%;
    height: auto;
    max-height: 320px;
  }
  
  .list-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    
    .header-right {
      flex-direction: column;
      gap: 12px;
      
      .search-input {
        width: 100%;
      }
    }
  }
}

@media (max-width: 768px) {
  .knowledge-page {
    padding: 16px;
  }
  
  .tree-header,
  .list-header {
    padding: 16px;
  }
  
  .list-content {
    padding: 16px;
  }
  
  .fragment-actions {
    flex-direction: column;
    gap: 6px;
    
    .el-button {
      width: 100%;
      justify-content: center;
      min-width: unset;
    }
  }
  
  .knowledge-tree-component {
    :deep(.el-tree-node__content) {
      height: 36px;
      padding: 0 6px;
    }
  }
}

@media (max-width: 480px) {
  .knowledge-page {
    padding: 12px;
  }
  
  .tree-header,
  .list-header {
    padding: 12px;
  }
  
  .list-content {
    padding: 12px;
  }
  
  .header-left {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .fragment-table {
    :deep(.el-table) {
      .el-table__header th,
      .el-table__body td {
        padding: 12px 8px;
        font-size: 13px;
      }
    }
  }
}
</style>
